<template>
  <div class="ruku">
    <div class="top"></div>
    <div class="info">
      <div class="info-l">
        <div>
          <div>商品名称</div>
          <div>{{ productName }}</div>
        </div>
        <div>
          <div>总数量（头）</div>
          <div>{{ totalNum }}</div>
        </div>
        <div>
          <div>已入库（头）</div>
          <div>{{ storedList.length }}</div>
        </div>
        <div>
          <div>剩余（头）</div>
          <div>{{ remainingNum }}</div>
        </div>
        <div>
          <div>已处理公斤数</div>
          <div>{{ totalWeight }}</div>
        </div>
      </div>
      <div class="info-r">
        <div>电子秤</div>
        <div>RFID</div>
      </div>
    </div>
    <div class="weight">
      <div>
        <div style="text-align: center;">挂钩编号</div>
        <div>
          <div>
            <bignum2 v-for="(x, y) in trackCode" :key="y" :num="x" />
          </div>
        </div>
      </div>
      <div class="line"></div>
      <div>
        <div style="text-align: center;">重量（kg）</div>
        <div>
          <div>
            <bignum2 v-for="(x, y) in weight.split('.')[0]" :key="y" :num="x" />
            <div class="point"></div>
            <bignum2 :num="weight.split('.')[1]" />
          </div>
          <div class="kg">
            kg
          </div>
        </div>
      </div>
    </div>
    <div class="order">
      <div>
        <div>批次：PICI20250731</div>
        <div> </div>
      </div>
      <div>
        <div>车牌：</div>
        <div :class="chepai.length == 7 ? 'chepai1' : 'chepai2'">
          {{ chepai }}
        </div>
      </div>
      <div>
        <div>屠宰场：牧原屠宰场</div>
        <div></div>
      </div>
    </div>
    <div class="stored-list">
      <div v-for="(x, y) in storedList" :key="y">
        <div>
          <div>{{ y + 1 }}</div>
          <div>{{ x.code }}</div>
          <div>{{ x.weight }}</div>
          <div @click="delProduct(y)"> - </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
  export default {
    data: {
      totalNum: 30,
      storedList: '',
      weight: '0.0',
      trackCode: [],
      productName: '热鲜白条',
      orderCode: '',
      timer: '',
      totalNum: '',
      time: '',
      date: '',
      chepai: '粤BFC5574',
      showWeight: '',
    },
    methods: {
      remainingNum(){
        return this.totalNum - this.storedList.length
      },
      totalWeight(){
        return this.storedList.reduce((acc, obj) => add(acc, obj.weight), 0);
      },
      createTime() {
        const date = new Date();
        const h = zero(date.getHours());
        const m = zero(date.getMinutes());
        const s = zero(date.getSeconds());
        this.time = `${h} : ${m} : ${s}`;
      },
      zero(num) {
        return num < 10 ? "0" + num : num
      },
      add(a, b) {
        const factor = 10 ** 10; // 根据需要调整因子
        return (a * factor + b * factor) / factor;
      },
      showList() {
        this.isList = true
      },
      testInput() {
        if (this.storedList.length == this.totalNum) {
          // console.log(storedList)
          // element.success('入库完毕')
          return
        }
        this.trackCode = (Number(this.trackCode) + 1).toString()
        this.weight = (110 + Math.random() * 10).toFixed(1)
        this.showWeight = ' ' + this.weight
        this.storedList.push({
          code: this.trackCode,
          weight: this.weight,
          product: this.productName
        })
      },
      delProduct(index) {
        this.storedList.splice(index, 1)
      },
      reload() {
        this.storedList = []
        this.trackCode = '1000'
        this.weight = '0.0'
        this.showWeight = '  0.0'
      }
    },
    mounted() {

    }
  }
</script>
<style lang="scss" scoped>
.ruku {
  padding: 10px;

  .info {
    display: flex;
    justify-content: space-between;
    margin-top: 20px;

    .info-l {
      width: calc(100% - 200px);
      display: flex;
      justify-content: space-around;

      >div {
        margin-right: 10px;
        text-align: center;
        border: 1px solid #fff;
        padding: 10px 20px;

        >div:last-child {
          font-size: 36px;
          font-weight: 700;
        }
      }
    }

    .info-r {
      width: 200px;
      display: flex;

      >div {
        width: 60px;
        height: 60px;
        background-color: #1889fa;
        color: #fff;
        border-radius: 50%;
        margin: 0 20px;
        display: flex;
        justify-content: center;
        align-items: center;
        cursor: pointer;
      }
    }
  }

  .weight {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: space-around;
    border: 10px solid #fff;
    border-radius: 20px;
    padding: 50px 0;
    margin: 20px auto;
    overflow: auto;

    >div {
      // width: 50%;
      font-size: 24px;

      >div:last-child {
        font-size: 54px;
        font-weight: 700;
        display: flex;
        justify-content: center;
        margin-top: 20px;

        >div {
          display: flex;

          >div {
            margin-right: 10px;
          }

          .point {
            width: 10px;
            height: 10px;
            background-color: #a3fe19;
            margin-right: 10px;
            margin: 240px 20px 0 20px;
          }
        }

        >div:last-child {
          display: flex;
          align-items: end;
        }
      }
    }

    .line {
      width: 2px;
      height: 300px;
      background-color: #fff;
    }
  }

  .order {
    width: 80%;
    margin: 10px auto;
    display: flex;
    justify-content: space-between;

    >div {
      display: flex;
      align-items: center;

      .chepai1 {
        background-color: #1889fa;
        color: #fff;
        padding: 5px 10px;
      }

      .chepai2 {
        background-color: #73fe70;
        color: #000;
        padding: 5px 10px;
      }
    }
  }

  .stored-list {
    display: flex;
    flex-wrap: wrap;

    >div {
      width: 20%;
      display: flex;
      justify-content: center;
      margin-bottom: 10px;

      >div {
        display: flex;

        >div {
          width: 40px;
          height: 40px;
          line-height: 40px;
          text-align: center;
          background-color: #000;
          color: #fff;
        }

        >div:nth-child(2) {
          width: 70px;
        }

        >div:nth-child(3) {
          width: 70px;
        }

        >div:last-child {
          background-color: gray;
          font-weight: 700;
          font-size: 24px;
          cursor: pointer;
        }
      }
    }
  }
}
</style>
